<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,html {
            height: 100%;
        }
        ul {
            list-style: none;
            height: 100%;
            width: 100%;
            /*position: absolute;*/
            /*top:0px;*/
        }
        ul li {
            height: 100%;
            width: 100%;
        }
        ol {
            list-style: none;
            /*position: fixed;*/
            /*top: 80px;*/
            /*left: 50px;*/
            position: absolute;
            top: 80px;
            left: 50px;
        }
        ol li {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            text-align: center;
            line-height: 50px;
            margin-top: -1px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<ul>
    <li class="d-toJump">鞋子区域</li>
    <li class="d-toJump">袜子区域</li>
    <li class="d-toJump">裤子区域</li>
    <li class="d-toJump">裙子区域</li>
    <li class="d-toJump">帽子区域</li>
</ul>
<ol class="ool">
    <li>鞋子</li>
    <li>袜子</li>
    <li>裤子</li>
    <li>裙子</li>
    <li>帽子</li>
</ol>
<!--楼层跳跃============开始-->
<!--楼层跳跃============结束-->
<script src="jquery-1.11.1.js"></script>
<script>
    $(function() {
        var color = ["pink", "blue", "yellow", "orange", "green"];
        for (var i = 0; i < color.length; i++) {
            $("ul>li").get(i).style.backgroundColor = color[i];
            $("ol>li").get(i).style.backgroundColor = color[i];
        }
        var setId = null;
        $("ol>li").click(function () {
            //思路，获取点击li的索引，给window的scrollTo();赋值，
            var index=$(this).index();
//            window.scrollTo(0,index*$("ul>li").eq(0).height()); //直接跳转。没有缓动效果
//            $(document).animate({"scrollTop":$("ul>li").eq(index).offset().top});//animate动画不支持scrollTop方法
            //缓动效果，需要计时器，渐渐地滑动
            clearInterval(setId);
            setId=setInterval(function(){
                //获取当前位置
                var current=$(window).scrollTop();
                //获取目标位置
                var target=$("ul>li").eq(index).offset().top;
//                console.log(current+"==="+target)
                //确定步数
                var step=(target-current)/10;
                step=step>0?Math.ceil(step):Math.floor(step);
                current+=step;
                //赋值给window滑出去的高度
                window.scrollTo(0,current);
                //停止计时器
                if(Math.abs(target-current)<=Math.abs(step)){
                    clearInterval(setId);
                }
            },20)
        })
        $(document).scroll(function () {
            var target1=100+$(this).scrollTop();
            $(".ool").stop().animate({"top":target1},400);
        });

    })
</script>


</body>
</html>